{% extends "layout.html" %}

{% block head %}
<title>{{ _(config["WEBSITE_NAME"]) }} - {{ query.username }}</title>
{% if session.get("current_user")["id"] == query.Id %}
	<script type="text/javascript">
		function edit() {
			document.getElementById("submit-btn").style.display = "inline-block";
			document.getElementById("close-btn").style.display = "inline-block";
			document.getElementById("edit-btn").style.display = "none";
			var inputs = document.getElementsByClassName("input");
			var i;
			for (i = 0; i < inputs.length; i++) {
	    		inputs[i].removeAttribute("readonly");
	    		inputs[i].setAttribute("style", "");
			} 
		}
		function closeEdit() {
			var inputs = document.getElementsByClassName("input");
			var i;
				for (i = 0; i < inputs.length; i++) {
	    		inputs[i].setAttribute("readonly", "on");
	    		inputs[i].setAttribute("style", "border: none; display: inline; font-family: inherit; font-size: inherit; padding: none; width: 100%; background-color: inherit; color: transparent;text-shadow: 0 0 0 black");
	    	}
			document.getElementById("submit-btn").style.display = "none";
			document.getElementById("close-btn").style.display = "none";
			document.getElementById("edit-btn").style.display = "block";
		}
	</script>
{% endif %}
<style type="text/css">
	@media only screen and (max-width: 768px) {
		.post-label, button[onclick="edit()"] {
			margin-bottom: 5px !important;
		}
		.userheader {
			margin-left: 0px !important;
		}
	}
</style>
{% if session["direction"] == "rtl" %}
	<style type="text/css">
		#posts {
			text-align: right;
		}
		th {
			text-align: right !important;
		}
	</style>
{% endif %}
{% endblock %}

{% block body %}
<div class="container-fluid">
	{% include "wiki/search_bar.html" %}
	{% include "wiki/aside.html" %}		
	{{ toolbar(edit=False, delete=False, add=True) }}	
	<div class="col-sm-10 col-xs-12" id="content">
		<h2 class="userheader">{{ query.username.title() }}</h2>
		<section>
			<ul class="nav nav-tabs" id="myTab" role="tablist">
				{% if session["direction"] == "rtl" %}
					<li class="nav-item active pull-left">
						<a class="nav-link" id="history-tab" data-toggle="tab" href="#history" role="tab"  aria-controls="history" aria-selected="true">{{ _("Info") }}</a>
				  	</li>
				  	<li class="nav-item pull-left">
					    <a class="nav-link" id="posts-tab" data-toggle="tab" href="#posts" role="tab"  aria-controls="posts" aria-selected="true">{{ _("Posts") }}</a>
				  	</li>
				{% else %}
					 <li class="nav-item pull-right">
						<a class="nav-link" id="posts-tab" data-toggle="tab" href="#posts" role="tab"  aria-controls="posts" aria-selected="true">{{ _("Posts") }}</a>
					</li>
					<li class="nav-item active pull-right">
							<a class="nav-link" id="history-tab" data-toggle="tab" href="#history" role="tab"  aria-controls="history" aria-selected="true">{{ _("Info") }}</a>
					  </li>
				{% endif %}
			</ul>
			{% if get_flashed_messages() %}
				<div class="alert alert-warning" style="margin-top: 10px;">
					<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
					<strong>{{ _("Warning!") }}</strong> {{ _("Email is already in use.") }}
				</div>
			{% endif %}
			<div class="tab-content" id="myTabContent">
				<div class="tab-pane active" id="history" style="margin-top: 10px;" role="tabpanel" aria-labelledby="history-tab">
					{% if session.get("current_user")["id"] == query.Id %}
						<button style="margin-bottom: -20px;" onclick="edit()" class="pull-right btn btn-sm btn-info" id="edit-btn">{{ _("Edit") }}</button>
						<form method="GET">
							<input type="text" name="id" value="{{ query.Id }}" style="display: none;">
							{% if config["ROOT_USER"]["username"] != query.username %}
								<input type="submit" name="action" formaction="{{ url_for('wiki.delete_user', username=query.username) }}" value="{{ _('Delete') }}" style="font-family: 'FontAwesome'; margin-bottom: -20px; margin-right: 5px;" class="pull-right btn btn-sm btn-info">
							{% endif %}
						</form>
					{% endif %}
					{% if session.get("current_user")["id"] == query.Id %}
						<form method="GET">
					{% endif %}
						<div class="table-responsive" style="width: 100% !important;">
							<table class="table" style="width: 100% !important;">
								<tbody>
									<tr>
										<th style="display: none;"></th>
										<td style="display: none;"></td>
									</tr>
									{% if session["direction"] == "rtl" %}
										<tr>
											<th class="text-right">{{ _("Name:") }}</th>
											<td>
												<input readonly class="input" type="text" name="fullname" style="border: none; display: inline; font-family: inherit; font-size: inherit; padding: none; width: 100%; background-color: inherit; color: transparent;text-shadow: 0 0 0 black" value="{{ query.fullname }}"> 
											</td>
										</tr>
										<tr>
											<th class="text-right">{{ _("Username:") }}</th>
											<td>{{ query.username }}</td>
										</tr>
										<tr>
											<th class="text-right">{{ _("Email:") }}</th>
											<td>
												<input readonly class="input" type="text" style="border: none; display: inline; font-family: inherit; font-size: inherit; padding: none; width: 100%; background-color: inherit; color: transparent;text-shadow: 0 0 0 black" name="email" value="{{ query.email }}">
											</td>
										</tr>
										<tr>
											<th class="text-right">{{ _("Privilege:") }}</th>
											<td>{{ query.privilege }}</td>
										</tr>
										<tr>
											<th class="text-right">{{ _("Description:") }}</th>
											<td>
												<input readonly class="input" type="text" style="border: none; display: inline; font-family: inherit; font-size: inherit; padding: none; width: 100%; background-color: inherit; color: transparent;text-shadow: 0 0 0 black" name="description" value="{{ query.description }}">
											</td>
										</tr>
									{% else %}
										<tr>
											<th>{{ _("Name:") }}</th>
											<td>
												<input readonly class="input" type="text" name="fullname" style="border: none; display: inline; font-family: inherit; font-size: inherit; padding: none; width: 100%; background-color: inherit; color: transparent;text-shadow: 0 0 0 black" value="{{ query.fullname }}"> 
											</td>
										</tr>
										<tr>
											<th>{{ _("Username:") }}</th>
											<td>{{ query.username }}</td>
										</tr>
										<tr>
											<th>{{ _("Email:") }}</th>
											<td>
												<input readonly class="input" type="text" style="border: none; display: inline; font-family: inherit; font-size: inherit; padding: none; width: 100%; background-color: inherit; color: transparent;text-shadow: 0 0 0 black" name="email" value="{{ query.email }}">
											</td>
										</tr>
										<tr>
											<th>{{ _("Privilege:") }}</th>
											<td>{{ query.privilege }}</td>
										</tr>
										<tr>
											<th>{{ _("Description:") }}</th>
											<td>
												<input readonly class="input" type="text" style="border: none; display: inline; font-family: inherit; font-size: inherit; padding: none; width: 100%; background-color: inherit; color: transparent;text-shadow: 0 0 0 black" name="description" value="{{ query.description }}">
											</td>
										</tr>
									{% endif %}
								</tbody>
							</table>
						</div>	
					{% if session.get("current_user")["id"] == query.Id %}
						<input type="text" name="id" value="{{ query.Id }}" style="display: none;">
						<input type="submit" formaction="{{ url_for('wiki.edit_user', username=query.username) }}" value="{{ _('Edit') }}" class="btn btn-default" id="submit-btn" style="display: none;">
						<input onclick="closeEdit();" type="button" value="{{ _('Close') }}" class="btn btn-default" id="close-btn" style="display: none;">
						</form>
					{% endif %}
				</div>
				{% if len(posts) <= 0 %}
					{% if session["direction"] == "rtl" %}
						<div class="tab-pane" id="posts" style="margin-top: 10px; float: right;" role="tabpanel" aria-labelledby="posts-tab">
							<b style="text-align: right;">{{ _("The user has not created any post yet.") }}</b>
					{% else %}
						<div class="tab-pane" id="posts" style="margin-top: 10px; float: left;" role="tabpanel" aria-labelledby="posts-tab">
							<b style="text-align: left;">{{ _("The user has not created any post yet.") }}</b>
					{% endif %}
					</div>
				{% else %}
					{% if session["direction"] == "rtl" %}
						<div class="tab-pane" id="posts" style="margin-top: 10px; text-align: right; direction: rtl;" role="tabpanel" aria-labelledby="posts-tab">
					{% else %}
						<div class="tab-pane" id="posts" style="margin-top: 10px; text-align: left; direction: ltr;" role="tabpanel" aria-labelledby="posts-tab">
					{% endif %}
							{% for el in posts %}
								<div class="col-xs-6">
									<h2 style="margin-left: 20px; margin-bottom: 10px !important"><a href="{{ url_for('wiki.post', post=el.url) }}">{{ el.address }}</a></h2>
									<p style="margin-left: 40px;">
										{% if len(sub("<.*?>", " ", el.content)) <= 200 %}
											{{ sub("<.*?>", " ", el.content) }}
										{% else %}
											{{ sub("<.*?>", " ", el.content)[:200] }}...
										{% endif %}
									</p>
								</div>
							{% endfor %}
						</div>
				{% endif %}
			</div>
		</section>
	</div>
</div>
{% endblock %}